<template>
    <el-main>
            <el-table :data="MyArticles">
                <el-table-column prop="title" label="标题" width="540px">
                </el-table-column>
                <el-table-column prop="createDate" label="发布日期" width="120px">
                </el-table-column>

                <el-table-column>
                    <template slot-scope="scope">
                        <el-button type="primary" @click="gotoArticle(scope.row.id)">查看文章</el-button>
                    </template>
                </el-table-column>

                <el-table-column>
                    <template slot-scope="scope">
                        <el-button type="danger" @click="delArticle(scope.row.id)">点击删除</el-button>
                    </template>
                </el-table-column>
                

            </el-table>
    </el-main>
</template>

<script>
import {getArticleByUserId,delArticleById} from '@/api/article'
export default {
    data(){
        return {
            MyArticles:[],
        }
    },
    mounted(){
        this.getArticles()
    },
    methods:{
        gotoArticle(id) {
        this.$router.push({ path: '/article', query: { id: id } });
      },
        delArticle(id){
        delArticleById({'id':id}).then(res =>{
            if (res.code == 1){
                this.getArticles()
                this.$message.success("删除成功")
            }
            
            else
                this.$message.error("删除失败")
        })
      },
      getArticles(){
        getArticleByUserId().then(res => {
            if (res.code == 1){
                this.MyArticles = res.data
            }
            else {
                this.$message.error("获取文章失败")
            }
        })
      }
    }
}
</script>